import React, { useState } from 'react';
import CesiumView from '../components/CesiumView';
import { Button, Drawer, Modal, Tabs } from 'antd';
import {
  CloseOutlined,
  BorderInnerOutlined,
  SplitCellsOutlined,
  EnvironmentOutlined,
  MergeCellsOutlined,
  TagsOutlined,
  HddOutlined,
} from '@ant-design/icons';

import '../global.less';
import styles from './index.less';

import {
  applyPolyfills,
  defineCustomElements,
} from '@esri/calcite-components/dist/loader';

import '@esri/calcite-components/dist/calcite/calcite.css';
import Measure from '@/components/Measure';

applyPolyfills().then(() => {
  defineCustomElements(window);
});
const { TabPane } = Tabs;

export default function IndexPage() {
  const [show, setShow] = useState(false);
  return (
    <>
      <Button
        className={styles.toolbarBtn}
        icon={<HddOutlined />}
        onClick={() => setShow(true)}
        type="primary"
      >
        工具箱
      </Button>
      <CesiumView />
      <Drawer
        title="工具箱"
        placement="right"
        closable={true}
        visible={show}
        onClose={() => setShow(false)}
        key="right"
        mask={false}
        getContainer={false}
        closeIcon={<CloseOutlined style={{ color: 'white' }} />}
        width={'25%'}
        className={styles.toolbarDrawer}
      >
        <Tabs
          tabPosition={'right'}
          size="small"
          style={{ color: 'white' }}
          tabBarGutter={1}
        >
          <TabPane
            tab={
              <span>
                <BorderInnerOutlined />
                图上量算
              </span>
            }
            key="1"
          >
            <Measure viewer={null} />
          </TabPane>
          <TabPane
            tab={
              <span>
                <EnvironmentOutlined />
                坐标定位
              </span>
            }
            key="2"
          >
            Content of Tab 2
          </TabPane>
          <TabPane
            tab={
              <>
                <TagsOutlined />
                <span>视角书签</span>
              </>
            }
            key="3"
          >
            Content of Tab 3
          </TabPane>
          <TabPane
            tab={
              <span>
                <SplitCellsOutlined />
                分屏对比
              </span>
            }
            key="4"
          >
            Content of Tab 4
          </TabPane>
          <TabPane
            tab={
              <span>
                <MergeCellsOutlined />
                卷帘对比
              </span>
            }
            key="5"
          >
            Content of Tab 5
          </TabPane>
        </Tabs>
      </Drawer>
    </>
  );
}
